<!--
  * 文件上传
  * 
  * @Author:    1024创新实验室：善逸
  * @Date:      2022-08-12 20:19:39 
  * @Wechat:    zhuda1024 
  * @Email:      huchanmilk@qq.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
  *
-->
<template>
  <div>
      <uni-file-picker
          :limit="props.limit"
          @select='selectUpload'
          :auto-upload='false'
          :file-mediatype="props.type"
          :file-extname="props.accept"
          @delete="handleRemove"
          v-model='fileList'/>
  </div>
</template>
<script setup>
import {computed, ref, watch} from 'vue';
import {fileApi} from "/@/api/support/file-api";
import {FILE_FOLDER_TYPE_ENUM} from "/@/constants/support/file-const";
import {SmartLoading} from "/@/lib/smart-support";
import {smartSentry} from '/@/lib/smart-sentry';

const props = defineProps({
  value: String,
  defaultFileList: {
    type: Array,
    default: () => [],
  },
  // 最多上传文件数量
  limit: {
    type: Number,
    default: 10,
  },
  type:{
    type: String,
    default: '',
  },
  // 上传的文件类型
  accept: {
    type: String,
    default: '',
  },
  // 文件上传类型
  folder: {
    type: Number,
    default: FILE_FOLDER_TYPE_ENUM.COMMON.value,
  }
});

// 图片类型的后缀名
const imgFileType = ['jpg', 'jpeg', 'png', 'gif'];

// 重新修改图片展示字段
const files = computed(() => {
  let res = [];
  if (props.defaultFileList && props.defaultFileList.length > 0) {
    props.defaultFileList.forEach((element) => {
      element.url = element.fileUrl;
      element.name = element.fileName;
      res.push(element);
    });
    return res;
  }
  return res;
});
// -------------------- 逻辑 --------------------

const fileList = ref([]);

watch(
    files,
    (value) => {
      fileList.value = value;
    },
    {
      immediate: true,
    }
);

const emit = defineEmits(['update:value', 'change']);
const selectUpload = async (options) => {
  SmartLoading.show();
  let { tempFiles } = options;
  tempFiles.forEach((element) => {
    let { name, url, uuid, file } = element;
    fileList.value.push({
      name, url, uuid, file,
    })
  });
  console.log("图片的值：", fileList.value)
  try {
    console.log(tempFiles);
    const formData = new FormData();
    formData.append('file', tempFiles.file);
    let res = await fileApi.upload(formData, props.folder);
    let file = res.data;
    file.url = file.fileUrl;
    file.name = file.fileName;
    fileList.value.push(file);
    emit('change', fileList.value);
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    SmartLoading.hide();
  }
};

async function handleRemove(file) {
  let fileStatus = file.status;
  if (fileStatus === 'removed') {
    let index = fileList.value.findIndex((e) => e.fileId === file.fileId);
    if (index !== -1) {
      fileList.value.splice(index, 1);
      emit('change', fileList.value);
    }
  }
  await fileApi.removeFile(file.fileKey);
}

// ------------------------ 清空 上传 ------------------------
function clear() {
  fileList.value = [];
}

defineExpose({
  clear,
});
</script>
